import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { Button, ErrorBlock, List, Toast } from "antd-mobile";
import { createAction } from "@common/utils";
import { CommonMask } from "@components";
import { SET_SCAN_DATA } from "@store/global-state/action-types";
import {
  SAGA_STOCKTAKING_LOAD_BARCODE_LIST,
  SAGA_STOCKTAKING_DEL_BARCODE,
} from "@store/stocktaking/saga-types";
import BarcodeBlk from "./BarcodeBlk";

const BarcodeInfo = () => {
  const [showMask, setShowMask] = useState(false);
  const dispatch = useDispatch();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const barcodeList = useSelector((state) => state.stocktaking.barcodeList);
  const scandata = useSelector((state) => state.globalState.scandata);

  useEffect(() => {
    dispatch(
      createAction(SAGA_STOCKTAKING_LOAD_BARCODE_LIST, {
        orderId: searchParams.get("id"),
        locationId: searchParams.get("locationId"),
      })
    );

    return () => dispatch(createAction(SET_SCAN_DATA, null));
  }, []);

  useEffect(() => {
    if (scandata && showMask) {
      setShowMask(false);

      let hasBarcodeArr = barcodeList.filter((i) => i.barcode === scandata);
      if (hasBarcodeArr.length > 0) {
        dispatch(
          createAction(SAGA_STOCKTAKING_DEL_BARCODE, {
            orderId: searchParams.get("id"),
            locationId: searchParams.get("locationId"),
            barcode: scandata,
            callback: () => {
              Toast.show({
                icon: "success",
                content: "删除成功",
                maskClickable: false,
              });
            },
          })
        );
      } else {
        Toast.show({
          icon: "fail",
          content: "所扫码条码未找到",
          maskClickable: false,
        });
      }
    }
  }, [scandata]);

  const enableScan = () => {
    if ("cordova" in window) {
      setShowMask(true);
    }
  };

  return (
    <>
      <div style={{ textAlign: "right" }}>
        <Button
          size="small"
          color="danger"
          onClick={() => enableScan()}
          style={{ margin: "12px" }}
          disabled={
            searchParams.get("status") === "DONE" || barcodeList?.length === 0
          }
        >
          扫码删除
        </Button>
      </div>
      {barcodeList?.length > 0 ? (
        <List>
          {barcodeList.map((i, idx) => (
            <List.Item
              key={idx}
              style={{ backgroundColor: "#F5F5F5" }}
              description={
                <BarcodeBlk
                  title={`${idx + 1}/${barcodeList.length}`}
                  data={i}
                />
              }
            />
          ))}
        </List>
      ) : (
        <ErrorBlock status="empty" description="暂无数据" title="" />
      )}
      <CommonMask showMask={showMask} txt="请扫码" />
    </>
  );
};

export default BarcodeInfo;
